<script>
  import $ from 'dfish-widget'
  import Mediaupload from './Mediaupload.vue'

  export default {
    mixins: [Mediaupload],
    data() {
      return {
        name: 'Imageupload',
        remark: '上传图片',
        examples: [{
          remark: '',
          type: 'html',
          view: true,
          code: `
            <template>
              <w-imageupload name="file" :model-value="fileList" thumbnail-width="80" thumbnail-height="80" file-types="*.png;*.jpg" @click:item="clickItem">
              </w-imageupload>
            </template>
            <${'script'}>
              export default {
                data() {
                  return {
                    fileList: [
                      {id: '001', name: '壁纸1.png', thumbnail: './img/qd1-thumb.jpg', url: './img/qd1.jpg'},
                      {id: '002', name: '壁纸2.png', thumbnail: './img/qd2-thumb.jpg', url: './img/qd2.jpg'}
                    ]
                  }
                },
                methods: {
                  clickItem(e, item, list) {
                    const images = list.map(f => f.url)
                    const current = images.indexOf(item.url)
                    $.previewImage(images, {current})
                  }
                }
              }
            </${'script'}>
            `,
          comp: {
            data() {
              return {
                fileList: [
                  {id: '001', name: '壁纸1.png', thumbnail: './img/qd1-thumb.jpg', url: './img/qd1.jpg'},
                  {id: '002', name: '壁纸2.png', thumbnail: './img/qd2-thumb.jpg', url: './img/qd2.jpg'}
                ]
              }
            },
            methods: {
              clickItem(e, item, list) {
                const images = list.map(f => f.url)
                const current = images.indexOf(item.url)
                $.previewImage(images, {current})
              }
            }
          }
        }, 
        {
          remark: '自定义上传按钮',
          type: 'html',
          view: true,
          code: `
            <template>
              <w-imageupload name="image" upload-limit="1"  thumbnail-width="120" thumbnail-height="120">
                <template #button="{chooseFile}">
                  <div @click="chooseFile" style="display:flex;align-items:center;justify-content:center;width:120px;height:120px;border:1px solid #ddd;">
                    自定义按钮
                  </div>
                </template>
              </w-imageupload>
            </template>
            `
        },
      ]

      }
    },
    created() {
      this.merge([{
          name: 'file-types',
          default: 'image'
        }
      ], 'attrs')
    }
  }
</script>

<style>
</style>
